<template>
  <div style="width: 100%;height:100%">
    <h1>Zego RTC Video Call</h1>
    <div id="remote-view"></div>
    <div id="mark" :class="{'show': showDialog}">
      <button @click="onplay()">点击播放</button>
    </div>
  </div>
</template>

<script>
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
import Vconsole from "vconsole";

export default {
  name: 'PlayWithIOS',
  props: {
    msg: String
  },
  data() {
    return {
      zg: null,
      appID: 1739272706,
      server: 'wss://webliveroom-test.zego.im/ws',
      userID: 'test_' + new Date().getTime(), // userID 用户自己设置，必须保证全局唯一
      userName: this.userID,// userName 用户自己设置，没有唯一性要求
      roomID: "7858", // roomID 用户自己设置，必须保证全局唯一
      streamID: null,
      remoteStream: null,
      remoteView: null,
      showDialog: false,
    }
  },
  mounted() {
    this.init();
    window.vconsole = new Vconsole();
  },
  methods: {
    init() {
      this.zg = new ZegoExpressEngine(this.appID, this.server);
      this.zg.setDebugVerbose(false);
      window.zg = this.zg;

      zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
          console.warn('[roomStreamUpdate]', roomID, updateType, streamList, extendedData);
          if (updateType == 'ADD') {
              this.streamID = streamList[0].streamID;
              this.remoteStream = await this.zg.startPlayingStream(this.streamID);
              this.remoteView = this.zg.createRemoteStreamView(this.remoteStream);
              this.showDialog = true;
              // this.remoteView.play("remote-view");
          }
      });
      
      fetch('https://sig-liveroom-admin.zego.cloud/thirdToken/get', {
          method: "POST",
          body: JSON.stringify({
              version: '04', 
              appId: this.appID,
              idName: this.userID,
              roomId: this.roomID,
              privilege: {
                  "1": 1,
                  "2": 1
              },
              expire_time: 100000000
          }),
          dataType: "json",
          contentType: "application/json; charset=utf-8"
      }).then(rsp=> rsp.json()).then(res=> {
          console.warn('[token]', res);
          const token = res.data.token
          // 登录
          this.zg.loginRoom(this.roomID, token, { userID: this.userID, userName: this.userName }, { userUpdate: true })
              .then(rsp=> console.warn('[登录 success]', rsp)).catch(err=> console.warn('[登录 fail]', err))
      });
    },
    onplay() {
      this.showDialog = false;
      this.remoteView.play("remote-view");

    }
  }
}
</script>
<style scoped>

#mark {
  position: absolute;
  background: rgba(0,0,0, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}
#mark button {
  display: inline-block;
  width: 100%;
  height: 120px;
  margin: 50px 0;
}
#mark.show {
  display: block;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
